<template>
	<view class="box">
		<view class="box_config">
			<u-tabs :list="tabsList" :scrollable="false" @click="onChange"></u-tabs>
		</view>
		<view class="content">
			<view class="li on" v-for="item,index in list" :key="index">
				<view class="title">
					<text>{{ item.title }}</text>
					{{ item.content }}
				</view>
				<view class="chuli flex-cb">
					<text>{{ item.sendTime }}</text>
					<text class="btn" v-if="active == '1'" @click="chuli(item.id)">处理</text>
				</view>
			</view>
		</view>
		<u-loadmore v-if="!is && list.length >= 5" status="nomore" line />
		<view class="no-list" v-if="!list || list.length == 0">
			<image src="@/static/images/default_empty.png"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: '1',
				page: 0, //页码
				is: true, //控制是否还能切换下一页
				list: [],
				tabsList: [{
						name: '待处理',
						value: '1'
					},
					{
						name: '已处理',
						value: '2'
					}
				]
			};
		},
		onLoad(options) {
			this.getList();
		},
		methods: {
			chuli(id) {
				let that = this;
				this.$app.ajax({
					data: {
						param: {
							venueId: uni.getStorageSync('GYMID'),
							id
						}
					},
					api: this.$api.backlogFinishMini()
				}).then((res) => {
					if (res.errorCode != '000000') return;
					uni.showToast({
						title: '处理完成',
						icon: 'success',
						duration: 1000,
						success(res) {
							setTimeout(() => {
								this.is = true
								this.page = 0
								this.list = []
								that.getList();
							}, 1000);
						}
					});
				});
			},
			// 列表
			getList() {
				if (!this.is) return
				this.page = this.page + 1
				this.$app.ajax({
					data: {
						pagination: {
							page: this.page,
							rows: 10
						},
						param: {
							venueId: uni.getStorageSync('GYMID'),
							type: this.active
						}
					},
					api: this.$api.backlogListMini()
				}).then((res) => {
					if (res.errorCode != '000000') return;
					if (res.recordList.length === 0 && this.page != 1 && res.recordList) {
						this.is = false
						return;
					}
					if (res.recordList.length < 10 || !res.recordList) {
						this.is = false
					}
					let arr = res.recordList;
					let arrs = [];
					if (arr) {
						arrs = this.list.concat(arr);
					} else {
						arrs = this.list;
					}
					this.list = arrs
					// this.setData({ list: arrs });
				});
			},
			onChange(item) {
				this.active = item.value
				this.is = true
				this.page = 0
				this.list = []
				this.getList();
			},
			onReachBottom() {
				this.getList();
			},
		}
	};
</script>
<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.box {
		padding-bottom: 30rpx;
	}
	.box_config {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #fff;
	}

	.content {
		padding: 30rpx;
	}

	.li {
		background-color: #fff;
		border-radius: 8rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;

		&:last-of-type {
			margin-bottom: 0;
		}
	}

	.title {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		line-height: 1.5;
		color: #222222;
	}

	.title text {
		font-size: 22rpx;
		color: #4167c1;
		line-height: 36rpx;
		border-radius: 4rpx;
		border: 1px solid #4167c1;
		padding: 0 10rpx;
		display: inline;
		margin-right: 20rpx;
	}

	.li.on .title text {
		border: 1px solid #dd5040;
		color: #dd5040;
	}

	.chuli {
		font-size: 26rpx;
		line-height: 1.5;
		color: #666666;
		margin-top: 30rpx;
	}

	.chuli .btn {
		width: 112rpx;
		display: inline;
		line-height: 50rpx;
		height: 52rpx;
		box-sizing: border-box;
		border-radius: 26rpx;
		border: 1px solid #4167c1;
		font-size: 24rpx;
		text-align: center;
		color: #4167c1;
	}
</style>